{{!--
This error template is used for all 400/500 errors, except 404, which might occur on your site.
It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in this file.
--}}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>{{meta_title}}</title>
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
</head>
<body class="error-template">
    <div class="site-wrapper">

        <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
            <div class="inner">
                <nav class="site-nav-center">
                    {{#if @blog.logo}}
                        <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
                    {{else}}
                        <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
                    {{/if}}
                </nav>
            </div>
        </header>

        <main id="site-main" class="site-main outer">
            <div class="inner">

                <section class="error-message">
                    <h1 class="error-code">{{code}}</h1>
                    <p class="error-description">{{message}}</p>
                    <a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
                </section>

                {{#if errorDetails}}
                <section class="error-stack">
                    <h3>Theme errors</h3>
                    <ul class="error-stack-list">
                        {{#each errorDetails}}
                            <li>
                                <em class="error-stack-function">{{{rule}}}</em>

                                {{#each failures}}
                                    <p><span class="error-stack-file">Ref: {{ref}}</span></p>
                                    <p><span class="error-stack-file">Message: {{message}}</span></p>
                                {{/each}}
                            </li>
                        {{/each}}
                    </ul>
                </section>
                {{/if}}

            </div>
        </main>
    </div>
</body>
</html>
